<template>
    <div class="body jobFindDetail" v-if="JSON.stringify(jobInfo) != '{}'">
        <!-- jfd-top -->
        <div class="box jfd_top">
            <h1>
                <span>{{ jobInfo.jobs_name }}</span>
                <h2 class="collectBtn" v-if="jobInfo.favor" @click="collect">已收藏</h2>
                <h2 class="collectBtn" v-if="!jobInfo.favor" @click="collect">收藏职位</h2>
            </h1>
            <h3>
                {{ jobInfo.district_cn }} | {{ jobInfo.experience_cn }}|
                {{ jobInfo.education_cn }} | {{ jobInfo.amount }}
            </h3>
            <h4>{{ jobInfo.wage_cn }}</h4>
        </div>
        <!-- jfd_com -->
        <div
            class="box jfd_comtext"
            @click="
                $router.push({
                    path: '/companyDetail',
                    query: { id: jobInfo.company.id },
                })
            "
        >
            <h1><img :src="jobInfo.company.logo" alt="" /></h1>
            <h2>
                <h3>{{ jobInfo.company.companyname }}</h3>
                <h4>{{ jobInfo.contact.contact }}·招聘专员</h4>
            </h2>
            <h5><img src="../../assets/images/yr.png" alt="" /></h5>
        </div>
        <!-- 详情1 -->
        <div class="box jfd_content">
            <h1>职位介绍：</h1>
            <h2>工作职责</h2>
            <p>{{ jobInfo.contents }}</p>
        </div>

        <div class="box" style="padding: 0; overflow: hidden">
            <component :is="'Map'" :company="jobInfo.company"></component>
        </div>

        <div class="j_newbutton">
            <div class="j_newbtn" @click="applytoudi">立即投递</div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosGet, axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
export default {
    name: '',
    data() {
        return {
            jobInfo: {},
        };
    },
    computed: {},
    mounted() {
        this.getJobDetail();
    },
    methods: {
        // 立即投递
        applytoudi() {
            axiosPost(
                'apis/jobs/apply',
                {
                    jid: this.jobInfo.id,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        Dialog.confirm({
                            title: '',
                            message: res.msg + '前往编辑简历页面？',
                        })
                            .then(() => {
                                this.$router.push('/editJianli');
                            })
                            .catch(() => {
                                // on cancel
                            });
                        return;
                    }
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    setTimeout(() => {
                        this.$router.go(-1);
                    },1000);
                }
            );
        },
        // 职位收藏
        collect() {
            axiosPost(
                'apis/jobs/favorite',
                {
                    jid: this.jobInfo.id,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.getJobDetail();
                }
            );
        },
        // 获取详情
        getJobDetail() {
            axiosGet(
                'apis/jobs/detail',
                {
                    id: this.$route.query.id,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.jobInfo = res.data.jobs_info;
                }
            );
        },
    },
};
</script>

<style lang="less" src="../../assets/css/job.less" scope></style>
